<template>
    <div class="search">
        
            <form  class="search-box" @submit="search">
                <div class="fleft">
                    <img class="search-icon" src="/static/images/icon/search.png" alt="">
                    <input name="input" @confirm="search" confirm-type="search"  @input="changeBox" :focus="focus" :value="searchContent" type="text" placeholder="请输入关键字">
                    <img class="cha" v-show="showCha" @tap.stop="clearcha" src="/static/images/icon/cha.png" alt="">
                </div>
                <div class="fright" hover-class="hoverc">
                    <button formType="submit">搜索</button>
                </div>
            </form>
         
        <div class="history" v-show="showHistory">
          <div class="header">
            <span class="text">历史记录</span>
            <img @tap="clearHistory" class="laji-icon" src="/static/images/icon/laji.png" /> 
          </div>
           <div class="list">
             <div class="item" hover-class="hoverc" @tap="goNewsByH(item)" v-for="(item, index) in history" :key="index">
               {{item}}
             </div>
           </div>
        </div>
        <div v-show="!showHistory">
          <p-list :plist="searchList"></p-list> 
        </div>
        
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import pList from "../../components/plist";
export default {
  components: {
    pList
  },
  data() {
    return {
      searchContent: "",
      showHistory: true,
      showCha: false,
      history: []
    };
  },
  computed: {
    ...mapState(["searchList"])
  },
  async mounted() {
    this.history = wx.getStorageSync("history");
  },
  methods: {
    ...mapActions(["getP"]),
    async getList(init, title) {
      let lastList = this.$store.state.searchList;

      if (init) {
        this.$store.state.more = true;
        this.$store.state.page = 1;
      }

      await this.getP({
        page: this.$store.state.page,
        size: this.$store.state.size,
        title: title
      }).then(res => {
        if (res.length < 1) {
          this.$store.state.more = false;
          this.$store.state.searchList = lastList;
          return;
        }
        if (!init) {
          this.$store.state.searchList = lastList.concat(res);
        } else {
          this.$store.state.more = true;
        }
      });
    },
    goNewsByH(value) {
      this.showCha = true;
      this.search(value);
    },
    changeBox(e) {
      this.showCha = true;
      this.searchContent = e.mp.detail.value.input;
    },

    clearcha() {
      this.searchContent = "";
      this.showCha = false;
      this.showHistory = true;
    },
    clearHistory() {
      var that = this;
      wx.showModal({
        title: "提示",
        content: "是否删除历史记录",
        success: function(res) {
          if (res.confirm) {
            that.history = [];
            wx.setStorageSync("history", []);
            that.showHistory = false;
          } else if (res.cancel) {
          }
        }
      });
    },
    search(e) {
      let value;
      if (e.mp) {
        value = e.mp.detail.value.input
          ? e.mp.detail.value.input
          : e.mp.detail.value;
      } else {
        value = e;
      }
      value = value.trim();
      if (!value) {
        return;
      }
      this.searchContent = value;
      if (this.history.indexOf(value) === -1) {
        if (this.history) {
          wx.setStorageSync("history", this.history.concat(value));
          this.history.push(value);
        } else {
          wx.setStorageSync("history", [value]);
          this.history = [value];
        }
      }
      this.showHistory = false;
      this.getList(true, value);
    }
  },
  // onPullDownRefresh: function() {
  //   return false;
  // },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (!this.$store.state.more) {
      return;
    }
    this.$store.state.page += 1;
    this.getList(false, this.searchContent);
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
@import "@/styles/mixins.scss";
.search {
  margin-top: 20rpx;
}
.search-box {
  position: relative;
  height: 100rpx;
  overflow: hidden;
  clear: both;
  display: block;
  width: 100%;
  margin-bottom: 20rpx;
  .fleft {
    position: relative;
    width: 77%;
    float: left;
    margin-left: 3%;
    input {
      background: #eee;
      border-radius: 10rpx;
      height: 80rpx;
      padding-left: 60rpx;
      font-size: $fontSize3;
      width: 100%;
      box-sizing: border-box;
    }
    img {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      z-index: 9;
    }
    .search-icon {
      left: 20rpx;
      top: 20rpx;
    }
    .cha {
      right: 40rpx;
      top: 20rpx;
    }
  }
  .hoverc {
    button {
      background: rgb(0, 60, 255) !important;
    }
  }
  .fright {
    width: 14%;
    text-align: center;
    float: right;
    margin-right: 3%;
    button {
      @include btn3(rgb(132, 30, 216));
    }
  }
}
.history {
  .header {
    position: relative;
    border-bottom: 1rpx solid $borderColor;
    border-top: 1rpx solid $borderColor;
    padding: 14rpx 20rpx;
    .text {
      font-size: $fontSize2;
    }
    .laji-icon {
      position: absolute;
      right: 20rpx;
      top: 6rpx;
      width: 60rpx;
      height: 60rpx;
    }
  }
  .list {
    position: relative;

    width: 100%;
    .hoverc {
      background: $hoverBg;
    }
    .item {
      width: 50%;
      display: inline-block;
      box-sizing: border-box;
      border: 1rpx solid $borderColor;
      border-top: none;
      padding: 20rpx;
      font-size: $fontSize3;
    }
  }
}
</style>
